<template>
	<view class="homeLayout pagebg">
		<CustomNavBar title="推荐"></CustomNavBar>
		<view class="banner">
			<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular>
				<swiper-item v-for="(item,index) in bannerList" :key="item._id">
				
					
					<navigator class="like" :url="`/pages/classlist/classlist?${item.url}`"
					v-if="item.target==='self'">
					<image :src="item.picurl" alt=""></image></navigator>
					<navigator class="like" :url="item.url"
					 target="miniProgram"    :app-id="item.appid" 
					v-else>
					<image :src="item.picurl" alt=""></image></navigator>
					
					

				</swiper-item>

			</swiper>
		</view>
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text"> 公告 </text>
		
			</view>
			<view class="center">
				
					<swiper :autoplay="true" 
					vertical
					
					>
						<swiper-item v-for="(item,index) in noticeList" :key="item._id">
				<navigator :url="`/pages/notice/detail?id=${item._id}`">
					{{item.title}}
				</navigator>
						</swiper-item>
					
					
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="20" color="#28b389"></uni-icons>
				
			</view>
			
		</view>

<view class="select">
	 <CommonTitle>
		 <template #name>每日推荐</template>
		 <template #custom>
			 <view class="date">
				 <uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
				 <uni-dateformat :date="Date.now()" format="dd号"></uni-dateformat>
			 </view>
			

			 
		 </template>
	 </CommonTitle>
	 <view class="content">
		 <scroll-view scroll-x="true"  class="scroll-view_H">
			<view class="box" v-for="(item,index) in randomList " :key="item._id" @click="goPreview(item._id)">
				
					<image :src="item.smallPicurl" mode="aspectFill"></image>
				
				
				
			</view> 
		 </scroll-view>
	 </view>
	
</view>
<view class="theme">
	 <CommonTitle>
		 <template #name>专题精选</template>
		 <template #custom>
			 <navigator url="/pages/classify/classify" open-type="reLaunch" class="more">More+</navigator>
				 
		 </template>
	 </CommonTitle>
	 <view class="content">
		 <ThemeItem  v-for="item in classifyList"
		 :key="item._id"
		  :item="item"
		 
		 
		 ></ThemeItem>
		<!-- <scroll-view scroll-x="true"  class="scroll-view_H">
			<view class="box" v-for="item in 8">
				<image src="../../common/images/preview_small.webp" mode="aspectFill"></image>
				
			</view> 
		 </scroll-view> -->
		  <ThemeItem :isMore="true"></ThemeItem>
	 </view>
	
</view>
	</view>
</template>

<script setup>
	// import url1 from '../../common/images/banner1.jpg'
	// import url2 from '../../common/images/banner2.jpg'
	// import url3 from '../../common/images/banner3.jpg'
	import {apiGetBanner,apiGetRandomList,apiGetNotice,apiGetClassify} from "@/api/api.js"

onShareAppMessage((res)=>{
	console.log('share',res)
	// 右上角 悬浮 是 from menu
	// 还有 一种 button opentype share
	return {
		title:"wallpaper123",
		// 如果分享首页 就写首页地址
		path:"/pages/index/index"
	}
	
})
onShareTimeline(()=>{
	// 分享需要在微信认证之后
	return {
		title:"wallpaperpyq",
		// 如果分享首页 就写首页地址
		path:"/pages/index/index",
		// 如果用了common里的 要引入，这里演示 用static
		imageUrl:bannerList.value[0].picurl
	}
})
	const x = ref(1)
	const goNotice=(id)=>{
		uni.navigateTo({
			url:"/pages/notice/detail?id="+id
		})
	}
	const goPreview=(id)=>{
		uni.setStorageSync("storageClassList", randomList.value)
		uni.navigateTo({
			url:`/pages/preview/preview?id=${id}&type=share`
		})
		
	}
	onMounted(() => {
		console.log('wallpaper mounted')
	})
	
	const bannerList=ref([
	// 	{
	// 	url:url1
	// },
	// {
	// 	url:url2
	// },
	// {
	// 	url:url3
	// },
	
	])
	const classifyList=ref([])
		const randomList=ref([])
		const noticeList=ref([])
	const getBanners=async()=>{
		let res=await apiGetBanner()
		
		console.log('res',res)
		// if(res.data.errCode===0){
			
		// }
		bannerList.value=res.data
		
	}
	const getRandomList=async()=>{
		let res=await apiGetRandomList()
		
		console.log('res',res)
	
			randomList.value=res.data
		
		
		
	}
	const getNotice=async()=>{
		let res=await apiGetNotice({select:true})
		
		console.log('res',res)
		
			noticeList.value=res.data
		
	}
	const getClassify=async()=>{
		let res=await apiGetClassify({
			pageSize:3,
			select:true
		});
		classifyList.value=res.data
	}
	getBanners();
	getRandomList();
	getNotice();
	getClassify();
	

	// export default {
	// 	data() {
	// 		return {
	// 			title: 'Hello'
	// 		}
	// 	},
	// 	onLoad() {

	// 	},
	// 	methods: {

	// 	}
	// }
</script>

<style lang="scss" scoped >
	.homeLayout {


		// background: pink;

		.banner {
			width: 100%;
			height: 340rpx;
			padding: 30rpx 0;
			// background: lemonchiffon;

			swiper {
				width: 100%;
				height: 100%;

				&-item {
					width: 100%;
					height: 100%;
					padding: 0 30rpx;
					// background:green;
					// .img{
					// 		width: 100%;
					// 		height: 100%;
					// 		background:red;
					// }
					.like{
						width: 100%;
						height: 100%;
						image {
							width: 100%;
							height: 100%;
							
							border-radius: 10rpx;
						}
						
					}
					

				
				}
			}

		}
	
	
	.notice{
		margin: 0 30rpx;
		height:80rpx;
		line-height:80rpx;
		border-radius: 40rpx;
		// padding: 27rpx 26rpx;
		background-color: #f9f9f9;
		display:flex;
		align-items:center;
		
		.left{
			width:140rpx;
			display:flex;
			align-items:center;
			justify-content: center;
			.text{
				color:#28b389;
				font-weight:bold;
				font-size:28rpx;
				
			}
		}
		.center{
			flex:1;
			// background:yellow;
			
			swiper{
				height:80rpx;
				swiper-item{
				height:100%;	
				font-size:30rpx;
				color:#666;
				// background:red;
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				}
			}
		}
		.right{
			width:70rpx;
			display:flex;
			align-items:center;
			justify-content: center;
		}
		
		
	}
	}
	.select{
		padding-top:50rpx;
		white-space: nowrap;
		width: 100%;
		.content{
			width:calc(100% - 30rpx);
			// width:720rpx;
			margin-left:30rpx;
			margin-top:30rpx;
			.scroll-view_H {
					white-space: nowrap;
					// width: 100%;
					
					.box{
						display: inline-block;
								width: 200rpx;
								height: 430rpx;
								margin-right:15rpx;
								// line-height: 300rpx;
								// text-align: center;
								// font-size: 36rpx;
								image {
									width: 100%;
									height: 100%;
									border-radius: 10rpx;
									
								}
					}
					.box:last-of-type{
						margin-right:30rpx;
					}
					
				}
		}
			.date{
				color:#28b389;
				
				display:flex;
				align:center;
				text{
					margin-left:5rpx;
				}
				.uniui-calendar:before {
				 
				    display: inline-block;
				    vertical-align: middle;
				}
				
			}
	}
	.theme{
		padding:50rpx 0;
		.more{
			font-size:32rpx;
			color:#888;
		}
		.content{
			margin-top:30rpx;
			padding:0 30rpx;
			display:grid;
			gap:15rpx;
			grid-template-columns: repeat(3,1fr);
		}
	}
</style>